<template>
  <div class="bar-button">
    <el-button plain size="small" :disabled="!active" @click="click">
      <!-- <el-icon
        ><back
          theme="outline"
          size="24"
          :fill="active ? '#000000' : '#9b9b9b'"
          strokeLinecap="square"
      /></el-icon> -->
      <!-- 设置传进来的icon -->
      <slot name="icon">
        <el-icon>
          <component
            :is="icon"
            theme="outline"
            size="24"
            :fill="active ? '#000000' : '#9b9b9b'"
            strokeLinecap="square"
          />
        </el-icon>
      </slot>
    </el-button>
    <el-text size="small" :type="active ? '' : 'info'"><slot></slot></el-text>
  </div>
</template>

<script>
export default {
  name: "MindMapBarButton",
  props: {
    active: {
      type: Boolean,
      default: false,
    },
    click: {
      type: Function,
      default: () => {},
    },
    icon: {
      type: Object,
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.bar-button {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.bar-button > * {
  display: block;
  width: 100%;
  text-align: center;
}
</style>